<template>
  <div v-if="detail" class="header">
    <div class="to">
      <div class="toback" @click="back()">
        <span class="iconfont icon-zuojiantou"></span>
        <span class="back">返回</span>
      </div>
      <span class="content">内容详情</span>
    </div>
    <div class="kongbai"></div>
    <div class="top">
      <img :src="detail.large_img" alt="" class="pic" />
    </div>
    <div class="bottom">
      <div class="b1">
        <div class="title">{{ detail.name }}</div>
        <div class="price">￥{{ detail.price }}</div>
      </div>
      <div class="country">{{ detail.enname }}</div>
      <div class="tiandu" v-if="sugarArr">
        <div class="tang">糖</div>
        <div class="tangfen" v-for="(item1, index1) in sugarArr" :key="index1">
          <span
            v-on:click="myTab1(index1)"
            v-bind:class="['t1', sugarIndex == index1 ? 'active' : '']"
            >{{ item1 }}</span
          >
        </div>
      </div>
      <div class="wendu" v-if="temArr">
        <div class="wen">温度</div>
        <div class="tem" v-for="(item2, index2) in temArr" :key="index2">
          <span
            v-on:click="myTab2(index2)"
            v-bind:class="['w1', tempIndex == index2 ? 'active2' : '']"
            >{{ item2 }}</span
          >
        </div>
        <div class="tem"></div>
      </div>
      <div class="naiyou" v-if="creamArr">
        <div class="nai">奶油</div>
        <div class="cream" v-for="(item3, index3) in creamArr" :key="index3">
          <span
            v-on:click="myTab3(index3)"
            v-bind:class="['c1', creamIndex == index3 ? 'active3' : '']"
            >{{ item3 }}</span
          >
        </div>
      </div>
      <div class="count">
        <div class="left">选择数量</div>
        <van-stepper v-model="value" class="right" />
      </div>
      <div class="shangping">商品描述</div>
      <div class="miaoshu">
        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{ detail.desc }}
      </div>
      <div class="gouwuche">
        <van-goods-action>
          <van-goods-action-icon
            icon="cart-o"
            text="购物车"
            v-if="count >= 1"
            :badge="count"
          />
          <van-goods-action-icon icon="cart-o" text="购物车" v-else />
          <van-goods-action-icon icon="chat-o" text="客服" dot />
          <van-goods-action-button
            type="warning"
            text="加入购物车"
            @click="Cart()"
          />
          <van-goods-action-button type="danger" text="立即购买" />
        </van-goods-action>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.header {
  .to {
    width: 100%;
    height: 40px;
    line-height: 40px;
    display: flex;
    position: fixed;
    z-index: 100000;
    background-color: #fff;
    .toback {
      .iconfont {
      }
      .back {
      }
    }
    .content {
      margin-left: 100px;
    }
  }
  .kongbai {
    height: 40px;
  }
  .top {
    img {
      width: 100%;
      height: 300px;
    }
  }
  .bottom {
    .b1 {
      display: flex;
      justify-content: space-between;
      .title {
        font-weight: bold;
        font-size: 20px;
        margin-left: 20px;
      }
      .price {
        font-size: 20px;
        color: #1442bf;
        font-weight: bold;
        margin-right: 20px;
      }
    }
    .country {
      margin-left: 20px;
      color: #acaec0;
    }
    .tiandu {
      margin-left: 20px;
      display: flex;
      margin-top: 10px;
      .tang {
        height: 35px;
        line-height: 35px;
        font-size: 14px;
        width: 30px;
      }
      .tangfen {
        display: flex;
        font-size: 14px;
        .t1 {
          width: 80px;
          text-align: center;
          height: 35px;
          line-height: 35px;
          background-color: #e8e8e8;
          margin-left: 20px;
          color: black;
          border-radius: 15px;
        }
        .active {
          background-color: #0c34ba;
          color: white;
        }
      }
    }

    .wendu {
      border-bottom: 1px solid #eeeeee;
      margin-left: 20px;
      display: flex;
      margin-top: 10px;
      margin-right: 15px;
      padding-bottom: 10px;
      .wen {
        width: 30px;
        height: 35px;
        line-height: 35px;
        font-size: 14px;
      }
      .tem {
        display: flex;
        font-size: 14px;
        .w1 {
          margin-left: 20px;
          width: 80px;
          text-align: center;
          height: 35px;
          line-height: 35px;
          color: black;
          background-color: #e8e8e8;
          border-radius: 15px;
        }
        .active2 {
          background-color: #0c34ba;
          color: white;
        }
      }
    }
    .count {
      font-size: 14px;
      height: 40px;
      line-height: 40px;
      margin-top: 10px;
      display: flex;
      justify-content: space-between;
      margin-left: 15px;
      margin-right: 15px;
      border-bottom: 1px solid #eeeeee;
      .left {
      }
      .right {
      }
    }
    .shangping {
      margin-top: 10px;
      margin-left: 15px;
      margin-right: 15px;
      font-size: 14px;
    }
    .miaoshu {
      padding-bottom: 50px;
      margin-left: 15px;
      margin-right: 15px;
      font-size: 15px;
      color: #9c9c9c;
    }
    .naiyou {
      border-bottom: 1px solid #eeeeee;
      margin-left: 20px;
      display: flex;
      margin-top: 10px;
      margin-right: 15px;
      padding-bottom: 10px;
      .nai {
        height: 35px;
        line-height: 35px;
        font-size: 14px;
      }
      .cream {
        display: flex;
        font-size: 14px;
        .c1 {
          width: 80px;
          text-align: center;
          margin-left: 20px;
          height: 35px;
          line-height: 35px;
          color: black;
          background-color: #e8e8e8;
          border-radius: 15px;
        }
        .active3 {
          background-color: #0c34ba;
          color: white;
        }
      }
    }
    .gouwuche {
      .child {
        width: 40px;
        height: 40px;
        background: #f2f3f5;
        border-radius: 4px;
      }
    }
  }
}
</style>


<script>
import "@/assets/fonts/iconfont.css";
import { Toast } from "vant";
export default {
  name: "xiangqing",
  data() {
    return {
      count:"",
      value: 1,
      //糖
      sugarArr: [],
      //温度
      temArr: [],
      //奶油
      creamArr: [],
      pid: "",
      detail: null,
      sugarIndex: "0",
      tempIndex: "0",
      creamIndex: "0",
      myname: "",
    };
  },
  created() {
    this.pid = this.$route.query.pid;
  },
  methods: {
    back() {
      this.$router.back();
    },
    onClickIcon() {
      Toast("点击图标");
    },
    onClickButton() {
      Toast("点击按钮");
    },
    myTab1(k1) {
      console.log(12);
      this.sugarIndex = k1;
    },
    myTab2(k2) {
      console.log(12);
      this.tempIndex = k2;
    },
    myTab3(k3) {
      console.log(12);
      this.creamIndex = k3;
    },

    myDetail() {
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        pid: this.pid,
      };
      this.axios("/productDetail", {
        method: "GET",
        params: d,
      })
        .then((res) => {
          console.log("这是商品详情接口", res);
          this.detail = res.data.result[0];
          //处理糖逻辑
          if (res.data.result[0].sugar) {
            let sugar = res.data.result[0].sugar.split("/");
            console.log(sugar);
            this.sugarArr = sugar;
          } else {
            this.sugarArr = null;
          }
          if (res.data.result[0].tem) {
            let temp = res.data.result[0].tem.split("/");
            this.temArr = temp;
          } else {
            this.temArr = null;
          }
          if (res.data.result[0].cream) {
            let cream = res.data.result[0].cream.split("/");
            this.creamArr = cream;
          } else {
            this.creamArr = null;
          }
        })
        .catch((err) => {
          console.log(err);
        });
    },
    Cart() {
      let tokenString = localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: tokenString,
        pid: this.pid,
        count: 1,
        rule: "无糖/默认奶油",
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/addShopcart", {
        method: "POST",
        data: bodystr,
      })
        .then((res) => {
          console.log("这是加入购物车接口", res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    Count() {
      let tokenString = localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: tokenString,
      };
      this.axios("/shopcartCount", {
        method: "GET",
        params: d,
      })
        .then((res) => {
          this.count = res.data.result;
          console.log("这是查询购物车商品总数量接口",res);
        })
        .catch((err) => {
          console.log(err);
        });
    },
    myGoumai() {
      this.$toast("加入购物车成功");
    },
    myid() {
      let tokenString = localStorage.getItem("token_list");
      let d = {
        appkey: "U2FsdGVkX19WSQ59Cg+Fj9jNZPxRC5y0xB1iV06BeNA=",
        tokenString: tokenString,
        nickName: this.myname,
      };
      let bodystr = "";
      for (var key in d) {
        bodystr += key + "=" + d[key] + "&";
      }
      this.axios("/updateNickName", {
        method: "POST",
        header: {
          "Content-Type": "application/x-www-form-urlencoded;charset=utf-8",
        },
        data: bodystr,
      })
        .then((res) => {
          console.lg(res);
        })
        .catch((err) => {
          console.log("err", err);
        });
    },
  },
  mounted() {
    this.myDetail();
    this.Count();
  },
};
</script>

